<template>
  <div class="">

  </div>
</template>

<script lang="ts" setup>
import "driver.js/dist/driver.css"
import {driver,DriveStep,Config,State} from "driver.js";
import {onMounted,defineProps,withDefaults,defineEmits} from "vue";

export interface IPopover {
  title: string,
  description: string,

}
export interface IStep {
  element: string,
  popover: IPopover
}
interface prop {
  id?: string,
  steps: IStep[],
}
const props = withDefaults(defineProps<prop>(), {
  steps:()=>[]
})

let emit=defineEmits(['end'])
onMounted(() => {
  if( props.id){
    let flag = localStorage.getItem(props.id);
    if (flag) {
      showTips();
    }
  }else{
    showTips();
  }

});
function showTips() {
  const dr = driver({
    prevBtnText: "上一步",
    nextBtnText: "下一步",
    doneBtnText: "我知道了",
    steps:props.steps,
    onCloseClick(element: Element | undefined, step: DriveStep, opts: { config: Config; state: State }): void {
      if(props.id){
        localStorage.setItem(props.id, JSON.stringify({ firstVisit: false }));
      }

    },
    onDestroyed(){
      emit("end")
    }

  });
  dr.drive()
}


</script>

<style scoped lang="less">

</style>